@import "../../styles/variables.scss";
@import "../../styles/mixins.scss";

.login-container {
  @include flex-center;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);

  .login-form-wrapper {
    width: 400px;
    padding: 40px;
    background: $white;
    border-radius: $border-radius;
    box-shadow: $box-shadow-modal;

    .login-title {
      text-align: center;
      font-size: $font-size-xxl;
      color: $text-color;
      margin-bottom: 40px;
      font-weight: 600;
    }

    .login-form {
      .ant-form-item {
        margin-bottom: 24px;
      }

      .ant-input-affix-wrapper {
        height: 40px;
        border-radius: $border-radius;
        border-color: $border-color;

        &:hover,
        &:focus {
          border-color: $primary-color;
        }

        .anticon {
          color: $text-color-tertiary;
        }
      }

      .ant-btn {
        height: 40px;
        border-radius: $border-radius;
        font-size: $font-size-md;
      }
    }
  }
}

.icon {
  &-user,
  &-lock {
    color: $text-color-tertiary;
    font-size: $font-size-md;
    margin-right: $spacing-sm;
  }
}
